<template>
  <div class="s-box">
    <div class="editPlan" @click="editLoanPlan">修改金额</div>
    <checklist ref="checkList" title="还款计划" :options="checkList" v-model="checkData"
               style="margin: 25px 0 1.4rem"></checklist>
    <div class="bottom-button" @click="addLoanPlan" :loading="loading">
      提交
    </div>
    <x-dialog v-model="showToast" class="dialog-demo" hide-on-blur>
      <group class="form-content" title="修改还贷计划" label-width="4.5em" label-margin-right="1em" label-align="left">
        <x-input title="修改金额" v-model="currentAmount" required></x-input>
      </group>
      <box gap="10px 10px">
        <x-button mini type="primary" @click.native="modifyAmount" style="background-color: #2D8CF0">确认</x-button>
        <x-button mini type="primary" @click.native="showToast=false">取消</x-button>
      </box>
    </x-dialog>

  </div>

</template>

<script>
  import {Checklist, Group, CellBox, LoadMore, XDialog, XInput, XButton, Box} from 'vux'

  export default {
    components: {
      Checklist,
      Group,
      CellBox,
      LoadMore,
      XDialog,
      XInput,
      XButton,
      Box
    },
    data() {
      return {
        loanPlan: {},
        loanTimeList: [],
        loading: false,
        checkList: [],
        checkData: [],
        showToast: false,
        currentAmount: '',
        currentAmounts: []
      }
    },
    created() {
      this.loanPlan = JSON.parse(sessionStorage.getItem('loanPlan'));
      this.calLoanPlan();
    },
    mounted() {

    },
    methods: {
      modifyAmount() {
        this.showToast = false;
        for (let i  in this.checkData) {
          this.currentAmounts[i] = this.currentAmount;
        }
        this.checkList = [];
        for (let i in this.loanTimeList) {
          this.checkList.push({});
          this.checkList[i].value = `${this.loanTimeList[i].repayTime}<span style="float: right">${this.currentAmounts[i]}</span>`;
          this.checkList[i].key = i;
        }
      },
      editLoanPlan() {
        this.currentAmount = this.loanTimeList[0].amount;
        if (this.checkData.length > 0) {
          this.showToast = true;
        }

      },
      addLoanPlan() {
        if(this.loading){
          return;
        }
        this.loading = true;
        let amounts = '', times = '', status = '';
        for (let i in this.loanTimeList) {
          amounts += this.currentAmounts[i] + ',';
          times += this.loanTimeList[i].repayTime + ',';
          status += this.loanTimeList[i].status + ',';
        }
        amounts = amounts.substr(0, amounts.length - 1);
        times = times.substr(0, times.length - 1);
        status = status.substr(0, status.length - 1);
        this.loanPlan.amounts = amounts;
        this.loanPlan.times = times;
        this.loanPlan.status = status;
        this.$api.addLoanPlan(this.loanPlan).then(data => {
          if (data.returnCode === 1) {
            this.$vux.toast.show({
              type: 'text',
              text: data.returnMsg,
              width: 'auto'
            });
            sessionStorage.removeItem('loanPlan');
            this.$router.go(-2);
          }
          this.loading = false;

        })
      },
      calLoanPlan() {
        this.$api.calLoanPlan(this.loanPlan).then(data => {
          if (data.returnCode === 1) {
            for (let i in data.loanTimeList) {
              this.currentAmounts[i] = data.loanTimeList[i].amount;
              this.checkList.push(data.loanTimeList[i]);
              this.checkList[i].value = `${data.loanTimeList[i].repayTime}<span style="float: right">${this.currentAmounts[i]}</span>`;
              this.checkList[i].key = i;
            }
            this.loanTimeList = data.loanTimeList;
            this.currentAmount = this.loanTimeList[0].amount
          }
        })
      }

    }
  }
</script>

<style lang="less" scoped>
  .editPlan {
    position: absolute;
    right: 15px;
    top: 12px;
    width: 2.4rem;
    height: .8rem;
    line-height: .8rem;
    text-align: center;
    border-radius: 5px;
    font-size: .4rem;
    background-color: #2D8CF0;
    color: #fff;
  }

  .bottom-button {
    position: fixed;
    width: 100%;
    height: 1.4rem;
    background-color: #2D8CF0;
    color: #fff;
    line-height: 1.4rem;
    font-size: .5rem;
    text-align: center;
    bottom: 0;
  }
</style>
